<template name="sandstormAppListPage">
  {{setDocumentTitle}}
  {{#sandstormTopbarItem name="title" priority=5 topbar=globalTopbar }}Apps{{/sandstormTopbarItem}}
  {{#if isSignedUpOrDemo}}
  <div class="app-list">
    <h1>Apps
      <form class="standard-form">
        <div class="button-row">
          {{#if uninstalling}}
            <button type="button" class="toggle-uninstall" title="Done uninstalling">Done uninstalling</button>
          {{else}}
            <button type="button" class="toggle-uninstall {{#unless actionsCount}}hide{{/unless}}"
                    title="Uninstall an app"
            >Uninstall...</button>
          {{/if}}
          <button type="button" class="upload-button">Upload app...
            <input type="file" style="display:none" accept=".spk">
          </button>
        </div>
      </form>
    </h1>

    <div class="search-row">
      <label>
        <span class="search-icon" title="Search"></span>
        <input class="search-bar" type="text" placeholder="search" value="{{ searchText }}" />
      </label>
    </div>

    {{#if showMostPopular}}
    <div class="popular-container">
      <h2 class="">Most used</h2>
      {{#each popularApps }}

      <a class="app-button {{#if dev}}dev-background {{/if}}" href="/apps/{{appId}}">
        <div class="app-icon" style="background-image: url('{{ iconSrc }}');"></div>
        <span class="app-title">{{appTitle}}</span>
        <span class="action-text">{{shortDescription}}</span>
      </a>
      {{/each}}
    </div>

    <h2 class="all-apps">All apps</h2>
    {{/if}}

    <a class="app-button install-button {{#if searching}}hide{{/if}}" href="{{appMarketUrl}}">
      <div class="app-icon pseudoapp install-icon"></div>
      <span class="action-title">Install...</span>
      <span class="action-text">from app market</span>
    </a>

    {{!-- data-app-id is only used for testing purposes --}}
    {{#each apps }}
    {{#if uninstalling}}
    <button class="app-button uninstall-action"
            data-app-id="{{appId}}">
      <div class="app-icon" style="background-image: url('{{ iconSrc }}');"></div>
      <span class="app-title">{{appTitle}}</span>
      <span class="action-text">Uninstall</span>
    </button>
    {{else}}
    <a class="app-button {{#if dev}}dev-background {{/if}}" href="/apps/{{appId}}"
            data-app-id="{{appId}}">
      <div class="app-icon" style="background-image: url('{{ iconSrc }}');"></div>
      <span class="app-title">{{appTitle}}</span>
      <span class="action-text">{{shortDescription}}</span>
    </a>
    {{/if}}
    {{/each}}
    {{#if searching}}
    {{#unless apps}}
    <p class="no-matching-app">
      You have no installed apps with that name. Try
      <a href="{{appMarketUrl}}">searching on the app market &raquo;</a>
    </p>
    {{/unless}}
    {{/if}}
  </div>
  {{else}}
    {{#if Template.subscriptionsReady}}
      <div class="not-signed-up">
        <h1>Unauthorized! :(</h1>
        <p>This is a private Sandstorm server. In order to install apps, you need to be invited
          by the admin. The admin can invite you from the admin panel.</p>
      </div>
    {{/if}}
  {{/if}}
</template>
